import { NavLink, useNavigate } from 'react-router-dom';
import './App.css';

/*
  useTransition 是 React 中的一个 Hook，用于优化用户体验，特别是在处理耗时的状态更新时。它可以帮助你区分紧急更新（如用户输入）和非紧急更新（如数据加载），从而提升应用的响应性和流畅性。
*/
function App() {
  const navigate = useNavigate();

  return (
    <>
      <div className='card'>
        <NavLink to={'/demo'}>
          <div>跳转Demo页面</div>
        </NavLink>
        <NavLink to={'/vite'}>
          <div>跳转Vite页面</div>
        </NavLink>
        <NavLink to={'/test'}>
          <div>跳转Test页面，重定向到demo</div>
        </NavLink>

        <div>
          <button onClick={() => navigate('/demo')}>跳转Demo页面</button>
        </div>
      </div>
    </>
  );
}

export default App;
